<template>
	<template v-if="column?.component">
		<!-- Tips: 处理cascader嵌套内容导致默认item不显示 -->
		<el-cascader
			v-if="column.component === 'el-cascader'"
			v-model="searchParam[column.key ?? handleProp(column.prop)]"
			v-bind="handleSearchProps"
			v-on="column?.on || {}"
		></el-cascader>
		<scRemoteSelect
      v-else-if="column.component === 'remote-select'"
      :remote-method="column.remoteMethod"
      v-model="searchParam[column.key ?? handleProp(column.prop)]"
      v-bind="handleSearchProps"
      v-on="column?.on || {}"
    />
		<slot v-else-if="!!column?.slot" :name="column.slot" :model="searchParam" :prop="column.key ?? handleProp(column.prop)"></slot>
		<component
			v-else
			:is="column.component"
			v-bind="handleSearchProps"
			v-model="searchParam[column.key ?? handleProp(column.prop)]"
			v-on="column?.on || {}"
		>
			<template v-if="column.component === 'el-select'">
				<component
					:is="`el-option`"
					v-for="(col, index) in column?.options || []"
					:key="index"
					:label="col[fieldNames.label]"
					:value="col[fieldNames.value]"
				></component>
			</template>
			<slot v-else></slot>
		</component>
	</template>
</template>

<script setup>
import { computed } from "vue";
import { handleProp } from "@/utils/util";

const props = defineProps({
	column: Object,
	searchParam: Object,
});

// 判断 fieldNames 设置 label && value 的 key 值
const fieldNames = computed(() => {
	return {
		label: props.column.fieldNames?.label ?? "label",
		value: props.column.fieldNames?.value ?? "value",
	};
});

// 判断 placeholder
const placeholder = computed(() => {
	const column = props.column;
	return (
		column?.props?.placeholder ??
		(column?.component === "el-input"
			? "请输入" + column.label
			: "请选择" + column.label)
	);
});

// 处理一下props默认值，或字段映射
const handleSearchProps = computed(() => {
	const label = fieldNames.value.label;
	const value = fieldNames.value.value;
	const searchEl = props.column?.component;
	const searchProps = Object.assign(
		{
			placeholder: placeholder.value,
			clearable: true,
		},
		props.column?.props ?? {}
	);
	let handleProps = searchProps;
	if (searchEl === "el-select") {
		handleProps = {
			...searchProps,
		};
	}
	if (searchEl === "el-date-picker") {
		handleProps = {
			rangeSeparator: "至",
			startPlaceholder: "开始时间",
			endPlaceholder: "结束时间",
			type: "date",
			...searchProps,
		};
	}
	if (searchEl === "el-tree-select")
		handleProps = {
			data: props.column?.options ?? [],
			...searchProps,
			props: { label, ...searchProps.props },
			nodeKey: value,
		};
	if (searchEl === "el-cascader")
		handleProps = {
			options: props.column?.options ?? [],
			...searchProps,
			props: { label, value, ...searchProps.props },
		};
	return handleProps;
});
</script>
